{% extends 'backend/subpage/backBase.html' %}
{% block crumb_content %}
    <ol class="breadcrumb">
        <li><a href="/main/userManage">后台管理</a></li>
        <li class="active">用户管理</li>
    </ol>
    <div class="well">
        用户管理
        {% block action_title %}

        {% endblock %}
        {% block action_block %}
            <button class="btn btn-info pull-right" data-toggle="modal" data-target="#createUsermodal">增加用户</button>
        {% endblock %}
    </div>
    <!-- Modal -->
    <div class="modal fade" id="createUsermodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">创建用户</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="userName" class="col-sm-2">用户名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="userName" placeholder="用户名"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="userAlias" class="col-sm-2">用户昵称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="userAlias"
                                       placeholder="用户昵称"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="userPassword" class="col-sm-2">密码</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="userPassword"
                                       placeholder="用户密码"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="userConfirmPassword" class="col-sm-2">确认密码</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="userConfirmPassword"
                                       placeholder="确认密码"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="userStatus" class="col-sm-2">用户状态</label>
                            <div class="col-sm-10">
                                <div class="radio col-sm-3">
                                    <label>
                                        <input type="radio" name="userStatus" id="userStatus1" value="true"/>
                                        激活
                                    </label>
                                </div>
                                <div class="radio col-sm-3">
                                    <label>
                                        <input type="radio" name="userStatus" id="userStatus2" value="false"/>
                                        取消激活
                                    </label>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary add-confirm">确认</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block backend_content %}
    <div class="backend_info_table">

    </div>
    <div class="pagination-box">

    </div>
    <script>
        $(function () {
            var cur_item = GetQueryString("per_page") || 15, page = GetQueryString("page") || 1;//配置一页所显示的数据总数以及默认显示为第一页
            $("#body-content").delegate(".showPageItemsBox select", "change", function () {
                cur_item = $(this).val();
                window.location.href = "/main/userManage?page=" + page + "&per_page=" + cur_item;
            });
            getAllUsersInfo();
            function getAllUsersInfo() {
                ajaxRequestJson("GET", "/main/user?per_page="+parseInt(cur_item)+"&page="+parseInt(page), {}, function (data) {
                    if (data.code === 0) {
                        var str = '';
                        console.log(data);
                        if (data.data.length === 0) {
                            $(".backend_info_table").html("<h4 class='text-center'>暂无用户信息</h4>");
                        } else {
                            str += '<table class="table table-bordered"><thead><tr>' +
                                '<th>用户ID</th>' +
                                '<th>用户名</th>' +
                                '<th>用户昵称</th>' +
                                '<th>用户状态</th>' +
                                '<th>操作</th>' +
                                '</tr></thead>';
                            for (var i = 0; i < data.data.length; i++) {
                                var item = data.data[i];
                                var flag = item.status === true ? "<span class='status-show-btn bg-green'></span>" : "<span class='status-show-btn bg-red'></span>";
                                var menu = '<div class="dropdown">' +
                                    '<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu' + i + '" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">操作' +
                                    '<span class="caret"></span>' +
                                    '</button>' +
                                    '<ul class="dropdown-menu" aria-labelledby="dropdownMenu' + i + '">' +
                                    '<li><a style="cursor:pointer;" href="/main/userManage/editUser?uid=' + item.user_id + '" class="edit-action" style="display:inline-block;">编辑</a></li>' +
                                    '<li><a style="cursor:pointer;" class="delete-action" data-id="' + item.user_id + '">删除</a></li>' +
                                    '</ul>' +
                                    '</div>';
                                str += '<tr><td>' + item.user_id + '</td><td>' + item.user_name + '</td><td>' + item.user_alias + '</td><td>' + flag + '</td>';
                                str += '<td>' + menu + '</td></tr>';
                            }
                            str += '</table>';
                            $(".backend_info_table").html(str);
                            loadPaginator("/main/userManage", cur_item, ".pagination-box", data, [15, 20, 30]);
                        }
                    }
                }, function (error) {
                    $.myAlert({title: "出错提示", message: "请求出错！"});
                });
            }

            $(".add-confirm").click(function () {
                //获取模态框的值
                var userName = $("#userName").val(), userAlias = $("#userAlias").val(),
                    userPassword = $("#userPassword").val(), cuserPassword = $("#userConfirmPassword").val();
                var userStatus = $("input[name='userStatus']:checked").val();
                if (userName.replace(/(^\s*)|(\s*$)/g, "") && userAlias.replace(/(^\s*)|(\s*$)/g, "") && userPassword.replace(/(^\s*)|(\s*$)/g, "") && cuserPassword.replace(/(^\s*)|(\s*$)/g, "") && userStatus !== undefined) {
                    //不为空
                    var flag = $("input[name=\'userStatus\']:checked").val() === "true" ? true : false;
                    ajaxRequestJson("POST", "/main/user", {
                        user_name: userName,
                        user_alias: userAlias,
                        pwd: userPassword,
                        cpwd: cuserPassword,
                        status: flag
                    }, function (data) {
                        if (data.code === 0) {//创建成功
                            $("#createUsermodal").modal('hide');
                            getAllUsersInfo();
                        } else {
                            $.myAlert({title: "出错提示", message: data.msg});
                        }
                    }, function (error) {
                        $.myAlert({title: "出错提示", message: "创建失败！"});
                    });
                } else {
                    $.myAlert({title: "出错提示", message: "请完善参数，再提交！"});
                }
            });


            //删除功能
            $(".backend_info_table").on("click", ".delete-action", function (event) {
                //获取机房id
                var user_id = $(event.target).data("id");
                swal({
                    title: "Warning!",
                    text: "是否确认要删除？",
                    icon: "warning",
                    buttons: {
                        cancel: "不，谢谢",
                        confirm: "确定"
                    }
                }).then(function (willDelete) {
                    if (willDelete) {
                        ajaxRequestJson("DELETE", "/main/user/" + user_id, "", function (data) {
                            if (data.code === 0) {
                                swal("该条数据已成功删除!", {
                                    icon: "success"
                                });
                                getAllUsersInfo();
                            } else {
                                swal("糟糕!", "删除失败!", "error");
                            }
                        }, function (error) {
                            swal("糟糕!", "请求失败!", "error");
                        });
                    } else {
                        swal("你的数据是安全的!");
                    }
                });

            });
        });
    </script>
{% endblock %}


